<!DOCTYPE HTML>
<html lang="utf-8">
<head>
<meta charset="utf-8">
<title>驾车宝典</title>
<script type="text/javascript" src="scripts/html5.js"></script>
<link href="styles/global.css" rel="stylesheet" type="text/css">
<link href="styles/userPanel.css" rel="stylesheet" type="text/css">
<!--[if lt IE 9 ]><link href="styles/ie8Fix.css" rel="stylesheet" type="text/css"><![endif]-->
<!--[if lt IE 8 ]><link href="styles/ie7Fix.css" rel="stylesheet" type="text/css"><![endif]-->
<!--[if lt IE 7 ]><link href="styles/ie6Fix.css" rel="stylesheet" type="text/css"><![endif]-->
<!--[if lte IE 6]><style type='text/css'>.logo img{ behavior: url("scripts/iepngfix.htc") }</style><![endif]-->
</head>
<body>
<!--顶部导航开始-->
<nav id="topNav"><div class="bgA_01">
	<div class="linkField">
		<div class="links">
			<a href="#" title="我的私信">我的私信</a><a href="#" title="退出">退出</a>
		</div>
		<div class="user">
			<a href="#" title="个人信息">劳拉克罗夫特</a>
		</div>
	</div>
	<div class="navField">
		<a href="#" title="社区广场">社区广场</a> | <a href="#" title="网站导航">网站导航</a> | <a href="#" title="驾车宝典">驾车宝典</a> | <a href="#" title="购物车">购物车</a>
	</div>
</div></nav>
<!--顶部导航结束-->

<!--头部开始-->
<header id="header"><div class="bgA_01">
	<div class="btns">
		<a href="#" class="btn download" title="点击下载">驾车宝典移动客户端 点击下载</a>
	</div>
	<div class="logoField">
		<a href="#" class="logo" title="驾车宝典"><img src="images/logo_01.png" src="驾车宝典"></a>
	</div>
	<div class="bannerField">
		<a href="#"><img src="images/pic_banner_01.jpg" alt="BANNER名称"></a>
	</div>
</div></header>
<!--头部结束-->

<!--导航开始-->
<nav id="mainNav"><div class="bgA_01">
	<div class="searchField">
		<input type="text" class="txt" value="驾车宝典">
		<input type="button" class="btn" value="" title="搜索">
	</div>
	<div class="navField">
		<ul>
			<li class="link1"><a href="#" title="社区首页">社区首页</a></li>
			<li class="link2"><a href="#" title="群组">群组</a></li>
			<li class="link3"><a href="#" title="帖子">帖子</a></li>
			<li class="link4"><a href="#" title="活动">活动</a></li>
			<li class="link5"><a href="#" title="新鲜事">新鲜事</a></li>
		</ul>
	</div>
</div></nav>
<!--导航结束-->

<!--主要部分开始-->
<section id="main"><div class="bgA_01">
	
	<div class="userNavPanel_03"><div class="bgP_01">
		<div class="imgField">
			<span><img src="images/pic_header_10.jpg" width="60" height="60" alt="用户名字"></span>
		</div>
		<nav class="menuField">
			<ul>
				<li><a class="on" href="#" title="修改基本资料">修改基本资料</a></li>
				<li><a href="#" title="修改密码">修改密码</a></li>
				<li><a href="#" title="更换头像">更换头像</a></li>
			</ul>
		</nav>
	</div></div>
	
	<div class="userSetupPanel_01"><!--这个功能块里的button标签可根据需要在 span button a 三种标签中调换-->
		<div class="listField">
			<dl>
				<dt>邮箱：</dt>
				<dd>sirenqueen@gmail.com</dd>
				<dd><a href="#" class="link link1" title="点击更改">更改</a></dd>
			</dl>
			<dl>
				<dt>昵称：</dt>
				<dd><input type="text" class="txt"></dd>
				<dd><em>昵称最长不超过16个字符</em></dd>
			</dl>
			<dl>
				<dt>性别：</dt>
				<dd><select class="select"><option>请选择</option><option>男</option><option>女</option></select></dd>
			</dl>
			<dl>
				<dt>生日：</dt>
				<dd><select class="select"><option>请选择</option><option>1983</option><option>1984</option><option>1985</option></select> 年 <select class="select"><option>请选择</option><option>8</option><option>9</option><option>10</option></select> 月 <select class="select"><option>请选择</option><option>1</option><option>2</option><option>3</option></select> 日</dd>
			</dl>
			<dl>
				<dt>所在地：</dt>
				<dd><select class="select"><option>请选择</option><option>上海</option><option>北京</option></select> <select class="select"><option>请选择</option><option>徐汇区</option><option>虹口区</option></select></dd>
			</dl>
			<dl>
				<dt>签名</dt>
				<dd><textarea class="textArea"></textarea></dd>
				<dd>最多50个字符</dd>
			</dl>
		</div>
		<div class="submitField">
			<button class="btn btn1" title="保存资料">保存资料</button>
			<button class="btn btn1" title="取消">取消</button>
		</div>
	</div>
	
	<div class="linkPanel_02">
		<div class="infoField">
			<p>在线会员 - 总计 <em>1800</em> 人在线 - <em>180</em> 会员、<em>1620</em> 位游客- 最高记录是 <em>10000</em> 于 2013-4-5</p>
		</div>
		<div class="linkField">
			<a href="#" class="link"><img src="images/pic_link_01.jpg" width="172" height="70" alt="驾车宝典"></a>
			<a href="#" class="link" title="点击下载"><img src="images/pic_link_02.jpg" width="172" height="70" alt="踏客社区 手机客户端"></a>
			<a href="#" class="link" title="关注我们"><img src="images/pic_link_03.jpg" width="172" height="70" alt="新浪微博"></a>
			<a href="#" class="link" title="关注我们"><img src="images/pic_link_04.jpg" width="172" height="70" alt="腾讯微博"></a>
			<span title="扫一扫"><img src="images/pic_link_05.jpg" width="172" height="70" alt="微信公众账号 交通广播驾车宝典"></span>
		</div>
	</div>
	
</div></section>
<!--主要部分结束-->

<!--底部开始-->
<footer id="footer"><div class="bgA_01">
	<div class="logoField">
		<a href="#" class="logo" title="驾车宝典"><img src="images/logo_02.png" src="驾车宝典"></a>
	</div>
	<div class="linkField">
		<a href="#">关于我们</a> <a href="#">加入我们</a> <a href="#">媒体报道</a> <a href="#">帮助中心</a> <a href="#">内容专区</a> <a href="#">免责声明</a> <a href="#">联系我们</a> <a href="#">移动版</a>
	</div>
	<div class="copyrightField">
		&copy; 2004-2013 www.jiachebaodian.com.cn All Rights Reserved. 驾车宝典 版权所有
	</div>
</div></footer>
<!--底部结束-->

<script type="text/javascript" src="scripts/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="scripts/global.js"></script>
</body>
</html>